<template>
    <div>
        <div class="ratings ">
            <div class="content border-1px">
                <div class="ratings_header">
                    <div class="header_left">
                        <p class="left_score">{{info.score}}</p>
                        <p class="left_des">综合评分</p>
                        <p class="left_hi">高于周边商家99%</p>
                    </div>
                    <div class="header_right">
                        <div class="right_service">
                            <div class="left_start">
                                <Star :score="info.serviceScore" :size="36" ></Star>
                            </div>
                            <div>服务态度 <span>{{info.serviceScore}}</span> </div>
                        </div>
                        <div class="right_food">
                            <div class="left_start">
                                <Star :score="info.foodScore" :size="36" ></Star>
                            </div>
                            <div>商品评分 <span>{{info.foodScore}}</span></div>
                        </div>
                        <div class="right_delive">送达时间 <span>{{info.deliveryTime}}分钟</span> </div>
                    </div>
                </div>
                <div class="split border-1px"></div>
                <div class="ratings_type border-1px">
                    <span :class="{on :selectType===2}" @click="setSelectType(2)" >全部{{ratings.length}}</span>
                    <span :class="{on :selectType===0}" @click="setSelectType(0)">满意{{positiveSize}}</span>
                    <span :class="{on :selectType===1}" @click="setSelectType(1)">不满意 {{ratings.length-positiveSize}}</span>
                    <div class="icon_gou">
                        <span class=" iconfont  icon-jinggao"  :class="{on :onlyShowText}" @click="toggleOnlyShowText"></span>
                        <span class="text">只看有内容的评论</span>
                    </div>
                </div>
                <div class="rating_list ">
                    <ul>
                        <li class=" border-1px" v-for="(rating,index) in filterRatings" :key="index">
                            <div class="li_title">
                                <div class="li_left">
                                    <img :src="rating.avatar" alt="">
                                </div>
                                <div class="li_center">
                                    <div class="name">{{rating.username}}</div>
                                    <div class="star">
                                        <Star :score="rating.score" :size="24" ></Star>
                                    </div>
                                </div>
                                <div class="li_right">{{rating.rateTime|date-format}}</div>
                            </div>
                            <div class="li_content">
                                <div class="li_rating">{{rating.text}}</div>
                                <div class="li_recommend">
                                    <span class="iconfont" :class="rating.rateType===0? 'icon-xihuan':'icon--anquan'"></span>
                                    <span class="food" v-for="(recommendc , index) in rating.recommend" :key="index">{{recommendc}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {mapState,mapGetters} from 'vuex'
    import  Star from '../../../components/star/star.vue'
    export default {
        name: "ShopRating",
        data(){
          return {
              selectType:0,//2显示全部，0显示满意，1显示不满意
              onlyShowText:true //只显示有评论的
          }
        },
        components:{
          Star
        },
        computed:{
            ...mapState(['ratings','info']),
           // ...mapGetters(["positiveSize"]),
            positiveSize(state){
                let  ratings=  state.ratings;
                let total=0;
                ratings.forEach((item,index)=>{
                    total+= item.rateType===0?1:0
                });
                // console.log(total+"成功计算");
                return total
            },
            filterRatings(){
                const {ratings,selectType,onlyShowText}=this;
             return   ratings.filter((item,index)=>{
                    if(onlyShowText&&selectType===2){ //只显示有评论的,全部评论
                     return   item.text.length>0
                    }
                    if(onlyShowText&&selectType===0){ //只显示有评论的,只显示满意评论
                        return   (item.text.length>0) && (item.rateType===0)
                    }
                    if(onlyShowText&&selectType===1){ //只显示有评论的,只显示不满意评论
                        return   (item.text.length>0) && (item.rateType===1)
                    }


                 if(!onlyShowText&&selectType===2){ //显示所有评论
                     return   item
                 }
                 if(!onlyShowText&&selectType===0){ //显示所有满意评论
                     return   item.rateType===0
                 }
                 if(!onlyShowText&&selectType===1){ //显示所有不满意评论
                     return    item.rateType===1
                 }


                })
            }

        },
        methods:{
            setSelectType(type){
                this.selectType=type
            },
            toggleOnlyShowText(){
                this.onlyShowText=!this.onlyShowText
            }
        },
        mounted(){

            this.$store.dispatch("getShopRatings",this.$route.params.id ,this.$nextTick(()=>{
                console.log("初始化一个回调函数");
                    let scr=document.getElementsByClassName("ratings")[0];
                new BScroll(scr,{click:true})

            }));

            let aa=[1,10,2,9,88];
            let t=0;
            aa.forEach((item,index)=>{
                return t+=item;
            });
            console.log(t);
            localStorage.setItem("ss",aa);
           let  qq=localStorage.getItem("ss");
            console.log(qq+"chengg")

        },
        updated(){


        }
    }
</script>

<style lang="stylus" scoped>
    @import '../../../assets/mixin.styl'
.ratings
    position:absolute
    top:4rem
    left:0
    right:0
    bottom:0
    overflow:hidden
    .content
        top-border-1px(#ccc)
        .ratings_header
            display:flex
            padding:0.3rem 0
            .header_left
                width:2.8rem
                padding:0.1rem 0
                border-right:1px solid #ccc
                text-align:center
                .left_score
                    font-size:0.8rem
                    height:1rem
                    color:sandybrown
                .left_des
                    font-size:0.3rem
                    font-weight:500
                    height:0.4rem
                    line-height:0.4rem
                .left_hi
                    color: rgb(147, 153, 159)
                    font-size:0.28rem
            .header_right
                flex:1
                padding:0.1rem 0
                font-size:0.3rem
                font-weight:700
                .right_service
                    height:0.7rem
                    display:flex
                    justify-content :center
                    align-items :center
                    span
                        color:orange
                .right_food
                    height:0.7rem
                    display:flex
                    justify-content :center
                    align-items :center
                    span
                        color:orange
                .right_delive
                    font-size:0.28rem
                    padding-left:1rem
                    span
                        color:rgb(147, 153, 159)

        .split
           height:0.5rem
           background:rgba(99,99,99,0.1)
           top-border-1px(#ccc)
           bottom-border-1px(#ccc)
        .ratings_type
            padding: 0.3rem
            font-size:0.3rem
            bottom-border-1px(#ccc)
            span
                display:inline-block
                padding:0.1rem
                text-align:center
                width:1.2rem
                margin-right: 0.3rem
                border:1px solid #ccc
                &.on
                    background:green
                    color:#fff
            .icon_gou
                padding-top:0.5rem
                .iconfont
                    width:0.4rem
                    height:0.4rem
                    padding:0
                    margin-right:0.1rem
                    line-height:0.4rem
                    border-radius:0.2rem
                    &.on
                        color: #ffffff
                        background:green
                .text
                    padding:0
                    width:auto
                    color: rgb(147, 153, 159)
                    font-size:0.28rem
                    border:none
        .rating_list
            //background:red
            padding:0.3rem 0.3rem 0.5rem
            li
                bottom-border-1px(#ccc)
                padding-top:0.2rem
                .li_title
                    display:flex
                    .li_left
                        width:0.6rem
                        height:0.6rem
                        padding-right:0.2rem
                        img
                            display:block
                            border-radius:50%
                            width: 100%
                            height:100%
                    .li_center
                        flex:1
                        font-size:0.25rem
                        .name
                            height:0.3rem
                        .star
                            height:0.4rem
                    .li_right
                        font-size:0.25rem
                        height:0.5rem
                .li_content
                    padding:0 0.4rem  0.3rem  0.8rem
                    .li_rating
                        font-size:0.3rem
                    .li_recommend
                        font-size:0.3rem
                        padding-top:0.2rem
                        .iconfont
                            margin-right:0.3rem
                            &.icon-xihuan
                                color:red//rgba(255,0,0,0.5)
                                background:green
                                background-clip :text
                            &.icon--anquan
                                color:yellow
                        .food
                            display:inline-block
                            padding:0 0.1rem
                            border:1px solid #3c3c3c
                            margin-right:0.2rem
                            margin-top:0.2rem
</style>
